<template>
  <div class="box">
    <h1>123</h1>
    <img src="/vite.svg" class="logo" alt="Vite logo" />
    {{ a }}
    <el-button type="primary" @click="a++">abc</el-button>
    <LoadingButton type="primary" @click="handleClick"
      >自带longing按钮</LoadingButton
    >
    <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
  </div>
</template>

<script setup lang="ts">
import LoadingButton from "@/components/LoadingButton/index.vue";

const a = ref(1);

const handleClick = async () => {
  const res = await setData();
  console.log("finish", res);
};
const setData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      a.value++;
      resolve(a.value);
    }, 1000);
  });
};
</script>

<style scoped lang="scss">
.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logo {
  height: $headbar_height;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
